<template>
  <div class="page-wrap">
    <div class="page-title">ToolTip</div>
    <div class="page-sub-title">基础用法</div>
    <el-card style="width: 600px">
	    <el-table></el-table>
	    
        <div style="text-align: left;">
          <p class="func_title">1.使用默认icon</p>
          <CdsToolTips
          :placement="placement_top"
          :trigger="trigger_hover"
          :effect="effect_light"
          :disabled="!disabled"
          :iconColor="iconColor"
          @isShow="isShow"
          @isHidden="isHidden">
          </CdsToolTips>
          <copy-code
            :code="code1">
          </copy-code>
          <p class="func_title">2.使用自定义icon(插槽方式传入)</p>
          <CdsToolTips
            :title="title1"
            :placement="placement_left"
            :width="width_300"
            :trigger="trigger_click"
            :effect="effect_dark"
            :disabled="!disabled"
            :offset="offset_20"
            @isShow="isShow"
            @isHidden="isHidden">
              <!-- 内容 -->
              The instance name contains Chinese, English, '_', '-' and numbers, ranging from 2 to 25 characters.
              <template v-slot:svgicon>
                <cds-back style="width: 20px;height: 20px;outline:none;color: #4499AA;cursor: pointer;"></cds-back>
              </template>
          </CdsToolTips>
          <copy-code
            :code="code2">
          </copy-code>
        </div>
    </el-card>
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="attributesData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">Menu Events</div>
    <el-table
      :data="methodsData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="事件名称">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="params"
        label="回调参数">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">Slots</div>
    <el-table
      :data="slotData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="插槽名">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {CdsToolTips} from 'cds-ui-business-components'
// import CdsToolTips from 'packages/businessComponents/cdsTooltips/src/toolTips.vue'
import CopyCode from '@/components/code.vue'


  const code1 = `
<template>
    <CdsToolTips
    :placement="placement_top"
    :trigger="trigger_hover"
    :effect="effect_light"
    :disabled="!disabled"
    :iconColor="iconColor"
    @isShow="isShow"
    @isHidden="isHidden">
  </CdsToolTips>
</template>
const placement_top = 'top'
const trigger_hover = 'hover'
const effect_light = 'light'
const disabled = true
const iconColor = '#2E2E44'`
  const code2 =  `
<template>
  <CdsToolTips
    :title="title1"
    :placement="placement_left"
    :width="width_300"
    :trigger="trigger_click"
    :effect="effect_dark"
    :disabled="!disabled"
    :offset="offset_20"
    @isShow="isShow"
    @isHidden="isHidden">
      内容
      <template v-slot:svgicon>
        <cds-back style="width: 20px;height: 20px;outline:none;color: #4499AA;cursor: pointer;"></cds-back>
      </template>
  </CdsToolTips>
</template>
const placement_left = 'left'
const title1 = '标题'
const width_300 = 300
const trigger_click = 'click'
const effect_dark = 'dark
const disabled = true
const offset_20 = 20`
const attributesData = [
  {field: 'title', desc: '标题', type: 'String', available: 'any', default: '--'},
  {field: 'placement', desc: 'Popover的出现位置', type: 'String', available: '同Popover', default: 'bottom'},
  {field: 'width', desc: 'Popover的宽度', type: 'Number', available: 'any', default: 150},
  {field: 'trigger', desc: 'Popover触发方式', type: 'String', available: 'click/focus/hover/manual', default: 'hover'},
  {field: 'effect', desc: '主题颜色', type: 'Number', available: 'light/dark', default: 'light'},
  {field: 'disabled', desc: 'Popover是否禁用', type: 'Boolean', available: 'true/false', default: 'false'},
  {field: 'offset', desc: 'Popver出现位置偏移量', type: 'String', available: '同 el-popver', default: 0},
  {field: 'iconColor', desc: '默认icon颜色', type: 'String', available: '设置默认icon颜色', default: '#2c3e50'},
]
const methodsData = [
  {name: 'isShow', desc: 'Tooltip展开回调', params: '鼠标事件参数'},
  {name: 'isHidden', desc: 'Tooltip关闭回调', params: '鼠标事件参数鼠标事件参数'}
]
const slotData = [
  {name: 'svgicon', desc: '自定义icon图标'}
]
  const placement_top = 'top'
  const placement_left = 'left'
  const title1 = '标题'
  const width_300 = 300
  const trigger_hover = 'hover'
  const trigger_click = 'click'
  const effect_dark = 'dark'
  const effect_light = 'light'
  const disabled = true
  const offset_20 = 20
  const iconColor = '#2E2E44'
  const isShow = (val) => {
    console.log('show:',val)
  }
  const isHidden = (val) => {
    console.log('hidden:',val)
  }


</script>
<style lang="scss" scoped>
.page-wrap {
  text-align: left;
  font-size: 14px;
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 24px 0;
  }
}
.func_title {
  font-size: 18px;
  // margin-top: 20px;
}
</style>
